<template>
	<view>
		<view class="content">
			<view style="padding: 30rpx;">
				<swiper class="swiper-box" @change="change" style="height: 360rpx;">
					<swiper-item v-for="(items, index) in good.images" :key="index">
						<image style="width: 100%; height: 100%;" mode="aspectFit" :src="items"></image>
					</swiper-item>
				</swiper>
				<view class="dot-content">
					<view v-for="(item ,index) in good.images" :key="index" class="swiper-dot" :class="current === index? 'active':''">
					</view>
				</view>
			</view>
			<view class="particular">
				<view class="particular-itle">
					<view class="particular-name"> {{ good.name }} </view>
					<view class="goods-number" @click.stop>
						<view v-if="number >0" class="reduce-button">
							<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icons.reduce" @click.stop="changeCart('reduce', good)"></image>
						</view>
						<view v-if="number > 0" class="number-input">{{ number }}</view>
						<view v-if="good.stock > 0" class="add-button">
							<image style="width: 100%; height: 100%;" mode="aspectFit" :src="realATime < (new Date()).getTime() && date==='today'?icons.add_2:icons.add"
							 @click.stop="changeCart('add', good)"></image>
						</view>
						<view v-else>已售罄</view>
					</view>
				</view>
				<view class="particular-content"> {{ good.description }} </view>
				<view class="particular-count">
					<view class="particular-reserve"> </view>
					<view class="particular-price">￥ {{ good.price }}</view>
				</view>
			</view>
			<view class="good-detail" v-html="good.details"></view>
			<view class="shop-cart">
				<view class="cart-left">
					<view class="cart-botton">
						<span class="cart-number">{{ number }}</span>
					</view>
					<span class="cart-count">合计：¥ {{ allCost() }}</span>
				</view>
				<view class="cart-right" @click="submitCost()">结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				realATime: undefined,
				current: 0,
				number: 0,
				good: {},
				icons: {
					reduce: '/static/images/icons/reduce@3x.png',
					add: '/static/images/icons/icon_tj@3x.png',
					add_2: '/static/images/icons/add_2@3x.png',
					cart: '/static/images/icons/cart@3x.png'
				}
			};
		},
		computed: {
			...mapGetters([
				'shopCart', 'currentEqiupment'
			])
		},
		created() {
			let key = this.getUrlKey('key')

			this.user_id = this.getUrlKey('user_id')
			if (key) {
				this.getEquipment(key)
			} else {
				const _this = this
				uni.navigateTo({
					url: '/pages/scene/get-meal' + '?' + _this.version
				})
			}
		},
		methods: {
			getEquipment(key) {
				const path = {
					app: "hardware",
					api: "api_hardware_buy_getInfo",
					version: "1.0",
					type: 2,
					data: {
						key: key
					}
				}
				this.sendSock(path)
			},
			getGoods() {
				const path = {
					app: "hardware",
					api: "api_hardware_buy_getGoodsInfo",
					version: "1.0",
					type: 2,
					data: {
						code: this.code || "",
						track_id: this.track_id || ""
					}
				}
				this.sendSock(path)
			},
			change(e) {
				this.current = e.detail.current;
			},
			changeCart(name, items) {
				if (name === 'reduce') {
					this.number--
				} else {
					if (this.number < this.good.stock) {
						this.number++
					} else {
						uni.showToast({
							icon: "none",
							title: '库存不足',
							duration: 2000
						});
					}
				}
			},
			allCost() {
				let all = 0;
				if (this.number && this.good.price) {
					all = this.number * this.good.price
				}
				return all
			},
			submitCost() {
				if (this.number > 0) {
					const path = {
						app: "hardware",
						api: "api_hardware_buy_createOrder",
						version: "1.0",
						type: 2,
						data: {
							user_id: this.user_id,
							goods_id: this.good.goods_id,
							number: this.number,
							code: this.code || "",
							track_id: this.track_id || ""
						}
					}
					this.sendSock(path)
				} else {
					uni.showToast({
						icon: "none",
						title: "该商品已售罄",
						duration: 2000
					});
				}
			},
			sendSock(path) {
				if (this.$store.state.socketOpen) {
					uni.sendSocketMessage({
						data: JSON.stringify(path)
					});
				} else {
					this.$store.state.socketMsgQueue.push(JSON.stringify(path));
				}
				const _this = this
				uni.onSocketMessage(function(res) {
					_this.getSock(res.data)
				});
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);
					} else {
						if (resj.api === "api_wx_user_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wx_user_keepLogin") {
							this.temporary()

						} else if (resj.api === "api_hardware_buy_getInfo") {
							this.code = resj.data.code
							this.track_id = resj.data.track_id
							this.getGoods();
						} else if (resj.api === "api_hardware_buy_getGoodsInfo") {
							const data = resj.data;
							this.good.goods_id = data.id;
							this.good.name = data.name;
							this.good.price = data.buy_price;
							this.good.description = data.description;
							this.good.number = 0;
							this.good.stock = data.stock;
							this.$set(this.good, 'images', this.combImg(data.main_img, data.details_img))
						} else if (resj.api === "api_hardware_buy_createOrder") {
							const data = {
								token: resj.data.token || "",
								price: this.allCost()
							}
							this.pay2(data)
						}
					}
				}
			}
		}
	};
</script>

<style>
	.particular {
		padding: 0 60rpx;
	}

	.particular-itle {
		margin: 40rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.particular-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.particular-content {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.particular-count {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.particular-reserve {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);
	}

	.particular-price {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 85, 0, 1);
	}

	.goods-number {
		display: flex;
		align-items: center;
	}

	.reduce-button,
	.add-button {
		width: 48rpx;
		height: 48rpx;
	}

	.number-input {
		text-align: center;
		width: 60rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.dot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
	}

	.swiper-dot {
		width: 10rpx;
		height: 10rpx;
		background: rgba(204, 204, 204, 1);
		border-radius: 50%;
	}

	.swiper-dot.active {
		width: 30rpx;
		border-radius: 5rpx;
		background: #999999
	}

	.dot-content .swiper-dot:not(:first-child) {
		margin-left: 10rpx;
	}

	.good-detail {
		padding: 20px 20px 80px 20px;
	}

	.shop-cart {
		position: fixed;
		bottom: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.cart-left,
	.cart-right {
		display: flex;
		align-items: center;
	}

	.cart-left {
		width: 530rpx;
		height: 98rpx;
		background: rgba(51, 51, 51, 1);
		box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 49rpx 0rpx 0rpx 49rpx;
	}

	.cart-right {
		flex: 1;
		height: 98rpx;
		background: linear-gradient(0deg, rgba(255, 195, 36, 1), rgba(255, 211, 94, 1));
		box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 0rpx 49rpx 49rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
		justify-content: center;
	}

	.cart-botton {
		width: 80rpx;
		height: 80rpx;
		background: url('~@/static/images/icons/cart@3x.png') no-repeat;
		background-size: 100% 100%;
		margin: 0 19rpx 0 9rpx;
		position: relative;
	}

	.cart-botton .cart-number {
		width: 30rpx;
		height: 30rpx;
		background: rgba(255, 85, 0, 1);
		border-radius: 50%;
		position: absolute;
		right: 0;
		color: #ffffff;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cart-count {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		line-height: 1;
	}
</style>
